{% extends "base.html" %}
{% load i18n %}
{% block extra_js %}
<script type="text/javascript">
  $(function() {
    $("#tabs").tabs();
    $("#ptabs").tabs();
  });
</script>
{% endblock %}
{% block content %}
<h1>{{ titulo }}</h1>
<p class="mensaje">
{{mensaje}}
</p>
<div id="ptabs">
  <ul>
    <li><a href="#ptabs-1">{% trans "Datos observados" %}</a></li>
    <li><a href="#ptabs-2">{% trans  "Interpretacion" %}</a></li>
  </ul>
<div id="ptabs-1">
  <table class="contenedor">
  <thead>
    <tr>
      <th colspan="2"><h1>{% trans "Archivo de usuario" %}: <i>{{datos.filename}}</i></h1></th>
    </tr>  
  </thead>  
  <tr>
  <td>
  <div class="scroll">
  <table class="data">
  <thead>
    <tr>
      <th>Tiempo (dias)</th>
      <th>Descenso (m)</th>
    </tr>
  </thead>  
  <tbody>
  {% for p in  datos.data %}
    <tr class="{% cycle odd,even %}">
      <td> {{ p.t|floatformat:6}}</td> 
      <td>{{ p.s|floatformat:3}}</td>
    </tr>
  {% endfor %}
  </tbody>
  </table>
  </div>
  </td>
  <td>
  <img src="{{archivoPNG.0}}" border="0" alt="Grafico descensos" height="430">
  </td>
  </tr>
  </table>
  <p class="mensaje">
  {{ayuda}}
  </p>
</div><!-- End  ptabs-1-->

<div id="ptabs-2">
<br />
<h1>interpretacion</h1>
  <div class="demo">
    <div id="tabs">
      <ul>
        <li><a href="/interpretar/daac/">Confinado</a></li>
        <li><a href="/interpretar/daasc/">Semiconfinado</a></li>
        <li><a href="/interpretar/daal/">Libre</a></li>
      </ul>
    </div>
  </div><!-- End demo -->
</div><!-- End  ptabs-2-->
</div><!-- End  ptabs-->

{% endblock %}

